<template>
    <p>123456</p>
    文本插值: {{ text }}
    <div v-html="htmlText"></div>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc" alt="">

    <button v-on:click="emitAlert">触发事件</button>
    <button @click="emitAlert">触发事件-简写</button>

    <div>
        <p>v-if</p>
        <p>num:{{ num }}</p>

        <button @click="num = 1">num变为1</button>
        <button @click="num = 2">num变为2</button>
        <button @click="num = 3">num变为3</button>


        <p v-if="num == 1">num现在是1----</p>
        <p v-else-if="num == 2">num现在是2======</p>
        <p v-else>num现在是3++++++</p>
        <p v-show="num == 1">num现在是1----v-show</p>
    </div>

    <p>v-for</p>
    <p v-for="(item,index) in todoArr">index: {{ index }}, item: {{ item }}</p>

    <p v-for="(value,key,index) in myObject">index:{{ index }}, key:{{ key }}, value:{{ value }}</p>






    个人信息填写
    <div>
      姓名: <el-input v-model="inputValue" />
    </div>

    <div>
      性别:
      <el-radio-group v-model="radio">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
    </div>

    <div>
      爱好：
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="吃" value="吃·" />
        <el-checkbox label="喝" value="喝" />
        <el-checkbox label="玩" value="玩" />
        <el-checkbox label="乐" value="乐" />
      </el-checkbox-group>
    </div>

    <div>
      自我介绍：
      <el-input v-model="textarea" type="textarea" />
      我是{{ inputValue }}，性别{{ radio }}，我的爱好是{{ checkList }}，自我介绍是：{{ textarea }}
    </div>

</template>


<script setup>
import {ref} from 'vue'

// 声明了一个变量名为text的变量，然后它的值是123，并且这个变量是响应式的
const text = ref('456')

const htmlText = ref('<span>这是一个html插值</span>')

const imgSrc = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

function emitAlert() {
    alert("弹框触发了")
}


// 用来控制是否显示隐藏。
const num = ref(3)

// 
const todoArr = ref(['吃','喝','学','睡'])

const myObject = ref({
    a:'tom',
    b:'jerry',
    c:'bigDog'
})

const inputValue = ref('张三')
const radio = ref('')
const checkList = ref([])
const textarea = ref('是罗翔老师常见的嘉宾')

</script>